<template>
    <div class="parent">
        父组件
        money:{{ money }}
        <button @click="money++">money++</button>
        <div>
            {{ nums }}
        </div>
        <button @click="nums.push(11, 12, 14, 15, 16)">添加数字</button>

        <ComSon :money="money" :nums="nums" />

        <ComSon2 :money="money" hello="china" :nums="nums" info="fail" />
    </div>
</template>

<script setup>
import ComSon from './ComSon.vue';
import ComSon2 from './ComSon2.vue';
import { ref } from 'vue'
const money = ref(100)
const nums = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

// props使用注意 
// 1. prop是响应式的 
// 2. 不要在子组件中去修改props，要遵循单向数据流,即props是只读的
// 3. 可以通过计算属性对props进行衍生（派生）出一个新值
// 4. 对传入props可以进行校验（类型、是否必传、默认值,值的规则）

</script>

<style>
.parent {
    border: 1px solid red;
    padding: 10px;
    width: 600px;
}
</style>